<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>充值</title>
    <link rel="stylesheet" href="__PUBLIC__/Product/css/lib/animate.css">
    <script src="__PUBLIC__/Product/js/lib/flexible.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .input_box .input_heard {
            width: 100%;
            height: 1.186667rem;
            background: linear-gradient(to right, #6951bc, #a163e0);
            position: relative;
        }
        .input_box .input_heard .goback {
            width: 0.226667rem;
            height: 0.453333rem;
            position: absolute;
            bottom: 0.36rem;
            left: 0.266667rem;
        }
        .input_box .input_heard p {
            font-size: 0.48rem;
            line-height: 1.186667rem;
            text-align: center;
            color: white;
        }
        /* 内容 */
        .input_con .choose_type{
            width: 9.466667rem;
            height: 1.733333rem;
            padding: 0 .266667rem;
            background-color: white;
            border-bottom: .013333rem solid #f4f4f4;
            display: flex;
        }
        .choose_type .left_img{
            width: 1.066667rem;
            height: 100%;
        }
        .choose_type .con_font{
            width: 8rem;
            padding-left: .24rem;
            height: 100%;
            line-height: 1.733333rem;
            font-size: .4rem;
        }
        .choose_type .right_arrow{
            width: .16rem;
            height: 100%;
        }
        .choose_type .left_img img{
            width: 1.066667rem;
            height: 1.066667rem;
            margin-top: .333333rem;
        }
        .choose_type .right_arrow img{
            width: .16rem;
            height: .266667rem;
            margin-top: .733333rem;
        }
        /* 转入金额 */
        .input_con .recharge_money{
            width: 9.466667rem;
            padding: .48rem .266667rem .6rem;
            height: 1.733333rem;
            background-color: white;
            border-bottom: .013333rem solid #f4f4f4;
        }
        .recharge_money .input_font{
            font-size: .346667rem;
            margin-bottom: .4rem;
            vertical-align: bottom;
        }
        .input_money span{
            font-size: .64rem;
        }
        .input_money input{
            -webkit-appearance: none;
            border: 0;
            outline: none;
            width: 8rem;
            font-size: .32rem;
        }
        .input_con .expect_time{
            width: 9.466667rem;
            padding: 0 .266667rem 1.12rem;
            height: .96rem;
            line-height: .96rem;
            background-color: white;
            font-size: .32rem;
        }
        .input_con .expect_time span{
            color: #a670e1;
        }
        .input_con button{
            border: 0;
            outline: none;
            width: 9.466667rem;
            margin-left: .266667rem;
            height: 1.146667rem;
            line-height: 1.146667rem;
            text-align: center;
            color: white;
            font-size: .4rem;
            background-color: #d1d1d1;
            border-radius: 0.10666666rem;
        }
        .input_con .active{
            background: linear-gradient(to right, #6951bc, #a163e0);
        }
        /* 弹窗 */
        .alert{
            display: none;
            width: 5.333333rem;
            height: .8rem;
            font-size: .346667rem;
            line-height: .8rem;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, .4);
            position: fixed;
            top: 6.76rem;
            left: 2.333333rem;
            z-index: 99;
            border-radius: .106667rem;
        }
        .show{
            animation: bounceInUp 1.5s; 
        }
        /* 蒙版 */
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            right: 0;
            background-color: black;
            opacity: .3;
            display: none;
        }
        /* 选择支付方式 */
        .input_box .choose_alert{
            width: 100%;
            height: 9.466667rem;
            background-color: white;
            position: fixed;
            bottom: 0;
            left: 0;
            display: none;
        }
        .choose_alert .alert_top{
            width: 9.466667rem;
            padding: 0 .266667rem;
            height: 1.146667rem;
            position: relative;
            border-bottom: .013333rem solid #f4f4f4;
        }
        .choose_alert .alert_top p{
            width: 100%;
            line-height: 1.146667rem;
            text-align: center;
            font-size: .426667rem;
        }
        .choose_alert .alert_top img{
            width: .453333rem;
            height: .453333rem;
            position: absolute;
            top: .346667rem;
            right: .266667rem;
        }
        .alert_con .withdraw_con_top{
            width: 9.466667rem;
            height: 1.72rem;
            padding: 0 .266667rem;
            border-bottom: .013333rem solid #f4f4f4;
            background-color: white;
            display: flex;
            position: relative;
        }
        .withdraw_con_top .left img{
            width: .8rem;
            height: .8rem;
            margin: .48rem 0 0 .133333rem;
        }
        .withdraw_con_top .body{
            margin-left: .4rem;
        }
        .withdraw_con_top .body .p1{
            font-size: .373333rem;
            margin-top: .4rem;
        }
        .withdraw_con_top .body .p2{
            font-size: .32rem;
            color: #989898;
        }
        .withdraw_con_top .body .p3{
            font-size: .373333rem;
            margin-top: .6rem;
        }
        .withdraw_con_top .right{
            position: absolute;
            right: .266667rem;
        }
        .withdraw_con_top .right .pur_cir{
            width: 0.266666rem;
            height: 0.266666rem;
            padding: 0.106666rem;
            border: 0.013333rem solid #e3e3e3;
            border-radius: 50%;
            margin-left: 0.696666rem;
            margin-top: 0.6166666rem;
        }
        .withdraw_con_top .right .pur_cir .pur{
            width: 0.266666rem;
            height: 0.266666rem;
            border-radius: 50%;
        }
        .withdraw_con_top .addCir{
            background-image: url(__PUBLIC__/Product/img/circle.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .alert_con .choose_type{
            width: 9.466667rem;
            height: 1.733333rem;
            padding: 0 .266667rem;
            background-color: white;
            border-bottom: .013333rem solid #f4f4f4;
            display: flex;
        }
        .alert_con .choose_type .left_img{
            width: 1.066667rem;
            height: 100%;
        }
        .alert_con .choose_type .con_font{
            width: 8rem;
            padding-left: .24rem;
            height: 100%;
            line-height: 1.733333rem;
            font-size: .373333rem;
        }
        .alert_con .choose_type .right_arrow{
            width: .16rem;
            height: 100%;
        }
        .alert_con .choose_type .left_img img{
            width: .706667rem;
            height: .493333rem;
            margin-top: .613333rem;
            margin-left: .203333rem;
        }
        .alert_con .choose_type .right_arrow img{
            width: .16rem;
            height: .266667rem;
            margin-top: .733333rem;
        }
    </style>
</head>
<body style="background-color:#f4f4f4;">
    <div class="input_box">
        <!-- 头部 -->
        <div class="input_heard">
            <img class="goback" src="__PUBLIC__/Product/img/fanhui.png" alt="返回">
            <p>充值</p>
        </div>
        <!-- 内容 -->
        <div class="input_con">
            <div class="choose_type">
                <input type="hidden" value="1">
                <div class="left_img">
                    <img src="__PUBLIC__/Product/img/weixin.png" alt="">
                </div>
                <div class="con_font">
                    <p>微信充值</p>
                </div>
                <div class="right_arrow">
                    <img src="__PUBLIC__/Product/img/right.png" alt="">
                </div>
            </div>
            <div class="recharge_money">
                <p class="input_font">转入金额</p>
                <p class="input_money">
                    <span>￥</span>
                    <input type="text" placeholder="建议转入100元以上的金额" class="money">
                </p>
            </div>
            <div class="expect_time">预计收益到账时间<span>2017-05-26</span>（星期六）</div>
            <button>确认充值</button>
        </div>
        <!-- 蒙版 -->
        <div class="mask"></div>
        <!-- 选择弹窗 -->
        <div class="choose_alert">
            <div class="alert_top">
                <p>选择支付方式</p>
                <img src="__PUBLIC__/Product/img/xx.png" alt="">
            </div>
            <div class="alert_con">
                <div class="withdraw_con_top">
                    <input type="hidden" value="2">
                    <div class="left">
                        <img src="__PUBLIC__/Product/img/nongye.png" alt="">
                    </div>
                    <div class="body">
                        <p class="p1">中国农业银行储蓄卡（7162）</p>
                        <p class="p2">单笔限额10000.00元</p>
                    </div>
                    <div class="right">
                        <div class="pur_cir">
                            <div class="pur"></div>
                        </div>
                    </div>
                </div>
                <div class="withdraw_con_top">
                    <input type="hidden" value="3">
                    <div class="left">
                        <img src="__PUBLIC__/Product/img/jianshe.png" alt="">
                    </div>
                    <div class="body">
                        <p class="p1">中国农业银行储蓄卡（7162）</p>
                        <p class="p2">单笔限额10000.00元</p>
                    </div>
                    <div class="right">
                        <div class="pur_cir">
                            <div class="pur"></div>
                        </div>
                    </div>
                </div>
                <div class="withdraw_con_top weixin">
                    <input type="hidden" value="1">
                    <div class="left">
                        <img src="__PUBLIC__/Product/img/weixin.png" alt="">
                    </div>
                    <div class="body">
                        <p class="p1 p3">微信支付</p>
                    </div>
                    <div class="right">
                        <div class="pur_cir">
                            <div class="pur"></div>
                        </div>
                    </div>
                </div>
                <div class="choose_type">
                    <div class="left_img">
                        <img src="__PUBLIC__/Product/img/card_yin.png" alt="">
                    </div>
                    <div class="con_font">
                        <p>添加银行卡</p>
                    </div>
                    <div class="right_arrow">
                        <img src="__PUBLIC__/Product/img/right.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹框 -->
        <div class="alert"></div>
    </div>
</body>
</html>
<script src="__PUBLIC__/Product/js/lib/jquery3.2.1.js"></script>
<script>
    $(function () {
        var flag1 = false;
        var flag2 = false;
        $('.goback').bind('click', function () {
            window.location.href = document.referrer; //返回上一页并刷新
        });
        // 显示蒙版和支付弹窗
        $('.input_con .choose_type').bind('click',function(){
            $('.choose_alert').show().prev().show();
            var val1 = $(this).find('input[type=hidden]').val();
            var val2 = $('.choose_alert').children('.alert_con').children('.withdraw_con_top').find('input[type=hidden]');
            for(var i = 0;i < val2.length;i++){
                if (val1 == val2.eq(i).val()) {
                    val2.eq(i).parent('.withdraw_con_top').find('.right').find('.pur').addClass('addCir').parent('.withdraw_con_top').siblings().children('.right').find('.pur').removeClass('addCir');
                } else {
                    val2.eq(i).parent('.withdraw_con_top').find('.right').find('.pur').removeClass('addCir');
                }
            }
            $('.withdraw_con_top').bind('click',function(){
                $(this).children('.right').find('.pur').addClass('addCir');
                $(this).siblings().children('.right').find('.pur').removeClass('addCir');
                var Src = $(this).children('.left').find('img').attr('src');
                var title = $(this).children('.body').find('.p1').text();
                var val3 = $(this).children('input[type=hidden]').val();
                $('.input_con .choose_type .left_img img').attr('src',Src);
                $('.input_con .choose_type .con_font p').text(title);
                $('.input_con .choose_type').children('input[type=hidden]').val(val3);
            });
            $('.alert_con .choose_type').bind('click',function(){
                window.location.href = 'shurukahao.html';
            });
        });
        // 关闭支付弹窗
        $('.choose_alert .alert_top img').bind('click',function(){
            $('.choose_alert').hide().prev().hide();
        });
        $('.money').bind("input propertychange", function () {
            var money = $(this).val();
            if (money.length != 0) {
                $('button').addClass('active').attr('disabled',false);
            } else {
                $('button').removeClass('active').attr('disabled',true);
            }
        });
        $('button').bind('click',function(){
            console.log(1111);
        });
    });
</script>